<template>
  <div class="page_body">
    <HomeTop :topTitle="topTitle"></HomeTop>
    <div class="page_header">
      <div class="header_box">
        <img class="image_path" :src="teampath.background_image" alt="" />
        <div class="pas_paths">
          <p class="pas_path">{{ teampath.name }}</p>
        </div>
        <div class="pas_pathss">
          <img class="image_patntwo" :src="teampath.image_path" alt="" />
        </div>
      </div>
    </div>
    <div class="page_content">
      <div class="content">
        <div class="content_p">成员</div>
        <div class="teamList">
          <img
            v-if="teampath.leader_photo != ''"
            class="teamImg"
            :src="teampath.leader_photo"
            alt=""
          />
          <div v-else class="empty">暂无图片</div>
          <div class="teamIntro">
            <div class="teamName">{{ teampath.leader_name }}</div>
            <div class="teamNum">领队</div>
          </div>
        </div>
        <div class="teamList">
          <img
            v-if="teampath.coach_photo != ''"
            class="teamImg"
            :src="teampath.coach_photo"
            alt=""
          />
          <div v-else class="empty">暂无图片</div>
          <div class="teamIntro">
            <div class="teamName">{{ teampath.coach_name }}</div>
            <div class="teamNum">教练</div>
          </div>
        </div>
        <div class="teamList" v-for="(item, index) in player" :key="index">
          <img
            v-if="item.photo != ''"
            class="teamImg"
            :src="item.photo"
            alt=""
          />
          <div v-else class="empty">暂无图片</div>
          <div class="teamIntro">
            <div class="teamIntro_path">
              <div class="teamName">{{ item.name }}</div>
              <img
                class="imgsex"
                v-if="item.sex == '男'"
                src="../../assets/image/setnan.png"
                alt=""
              />
              <img
                class="imgsex"
                v-if="item.sex == '女'"
                src="../../assets/image/setnv.png"
                alt=""
              />

              <div class="teamIntro_but">
                <van-button
                  class="oper"
                  plain
                  type="info"
                  @click="operate(item.id)"
                ></van-button>
                <van-button
                  plain
                  type="info"
                  class="dele"
                  @click="deletebut(item.id)"
                ></van-button>
              </div>
            </div>
            <div class="teamNum_fixt">
              <div class="teamNum">年龄:{{ item.age }}岁</div>
              <div class="teamNum_dui">队员</div>
            </div>
          </div>
        </div>
      </div>
      <div class="page_bottom" v-if="!name">
        <div class="createBtn" @click="addTeam()">添加队员</div>
      </div>
      <div class="page_bottom" v-if="name">
        <div class="createBtn" @click="addTeams()">添加队员</div>
      </div>
      <van-dialog
        v-model="show"
        title="你确定要删除该球员吗"
        width="5.2rem"
        :showConfirmButton="true"
        :closeOnClickOverlay="true"
        :show-cancel-button="true"
        @confirm="deleteconfirm()"
      >
      </van-dialog>
    </div>
  </div>
</template>
  <style src="../../assets/css/game/teamMassage.css" scoped></style>
  
  <script>
import HomeTop from "@/components/homeTop.vue";
import { Indicator, Toast } from "mint-ui";
import { Button, Dialog } from "vant";
export default {
  name: "teamMassage",
  components: {
    HomeTop,
    [Button.name]: Button,
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      topTitle: "球队信息",
      player: [],
      teampath: {},
      show: false,
      romid: "",
      name: "",
    };
  },
  mounted() {
    this.name = this.$route.query.name;
    console.log(this.name);
    this.teamDetail();
  },
  methods: {
    teamDetail() {
      let url = "/mobile/teamDetail";
      let data = {
        team_id: sessionStorage.getItem("teamid"),
      };
      Indicator.open();
      this.axios
        .post(url, data)
        .then((res) => {
          Indicator.close();
          if (res.code == 0) {
            this.player = res.player;
            this.teampath = res.team;
          } else {
            Toast({
              message: res.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
    operate(id) {
      this.$router.replace({
        name: "editPlayer",
        query: {
          id: id,
        },
      });
    },
    //启动删除按钮
    deletebut(id) {
      this.romid = id;
      this.show = true;
    },
    //删除
    deleteconfirm() {
      let url = "/mobile/removeTeamPlayer";
      let data = {
        team_id: sessionStorage.getItem("teamid"),
        player_id: this.romid,
      };
      Indicator.open();
      this.axios
        .post(url, data)
        .then((res) => {
          if (res.code == 0) {
            this.teamDetail();
          } else {
            Toast({
              message: res.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
    addTeam() {
      this.$router.replace({
        name: "addPlayers",
      });
    },
    addTeams() {
      this.$router.replace({
        name: "newlyadded",
      });
    },
  },
};
</script>
<style scoped>
.van-button {
  height: 30px;
  margin-left: 0.3rem;
}
.teamIntro_but {
  margin-left: 1.35rem;
}
.oper {
  background: url("../../assets/image/xiugai.png") no-repeat;
  background-size: 70% 70%;
  border: none;
}
.dele {
  background: url("../../assets/image/sancu.png") no-repeat;
  background-size: 70% 70%;
  border: none;
}
</style>
  